<template>
  <!-- 新增金融方案-->
  <view class="content">
    <u-toast ref="uToast" duration="3000" />
    <view class="Program">
      <view class="proName flex">
        <view class="proinna">
          方案名称：
        </view>
        <view class="proinput">
          <input class="proincss" type="text" placeholder="请自定义该方案名称" v-model="programName" placeholder-style="font-size:28rpx;color:#999">
        </view>
      </view>
      <view class="proName flex">
        <view class="proinna">
          方案类型：
        </view>
        <view class="profangan flex flex-jc-fe" @tap="schemeTypexz = true">
          <!-- <view class="prlis" v-if="schemeTyps ===''">
            请选择
          </view> -->
          <view class="prlisxz">
            {{schemeTyps}}
          </view>
          <!-- <view class="prlicon">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view> -->
        </view>
      </view>
      <view class="prompt">
        请认真填写并仔细核对，以免纠纷，该金融方案不代表平台</br>
        备注：</br>
        1.万元系数输入格式为：数字组合。如：“328”</br>
        2.万元系数计算规则：(贷款金额)÷10000元 X 万元系数=月供</br>
        3.万元系数，金融手续费未填写，系统自动判别为无该选项；
      </view>
    </view>
    <view class="myFpbox">
      <view class="schemeboxTyp">
        1.点击方格输入，点击
        <i-icon class="iconsd" style="height: 30rpx;height: 30rpx;" icon="iconjia" type="multiple"></i-icon>
        可新增方案组</br>
        2.从右往左滑动可删除方案组
      </view>
      <view class="formbox">
        <view class="">
          <table class="tabborder">
            <tr class="trborder">
              <td class="trborder heads trw3">首付比例</td>
              <td class="trborder heads trw3">贷款期数</td>
              <td class="trborder heads trw1">万元系数</td>
              <td class="trborder heads trw0">金融手续费</td>
            </tr>
          </table>
        </view>
        <view class="" v-for="(item, index) in pageskulist" :key="item.children.id">
          <u-swipe-action :show="item.show" :index="index" @click="clickdelete(item,index)" @open="open" :options="options">
            <view class="item u-border-bottom">
              <view class="title-wrap">
                <table class="tabborder">
                  <tr class="trborder" v-for="(item1,index1) in item.children" :key="index1">
                    <td class="trborder trw3" id="trborhb">{{item.Proportion}}</td>
                    <td class="trborder trw3">{{item1.LoanPeriods}}</td>
                    <td class="trborder trw2">
                      <view class="flex flex-ai-c">
                        <!-- <view>
                          <input class="inputcsss" disabled="disabled" type="number" @blur="blure($event,index,index1)" v-model="item1.InterestRate"
                            name="jg" @input="InputChildItem($event,item,item1,'Guideprice',index,index1)" maxlength="3">
                        </view> -->
                        <view>
                          <view v-if="item1.InterestRate" class="newshowcss" @click="keyclick(item,item1,index,index1,'InterestRate')">
                            {{item1.InterestRate}}
                          </view>
                          <view v-else class="newshowcss" style="color: #a8a8a8;" @click="keyclick(item,item1,index,index1,'InterestRate')">
                            请输入
                          </view>
                        </view>
                        <view class="monthlys flex flex-ai-c" v-if="item1.Monthly">
                          <view class="sanj"></view>
                          <view class="moncss">
                            月供:{{item1.Monthly}}
                          </view>
                        </view>
                      </view>

                    </td>
                    <td class="trborder trw0">
                      <view class="newshowcss2" @click="keyclick(item,item1,index,index1,'Poundage')">
                        {{item1.Poundage}}
                      </view>
                      <!-- <input type="number" v-model="item1.Poundage" name="jg" @input="InputChildItem($event,item,item1,'Quote')"> -->
                    </td>
                  </tr>
                </table>
              </view>
            </view>
          </u-swipe-action>
          <view class="iconxuaf" @click="iconxzengD(item.id)" v-show="item.iconShow">
            <i-icon class="iconsd" icon="iconjia" type="multiple" size="48rpx"></i-icon>
          </view>
        </view>
        <!-- 最后一个显示的icon -->
        <view class="iconxuaf" @click="iconxzeng">
          <i-icon class="iconsd" icon="iconjia" type="multiple" size="48rpx"></i-icon>
        </view>
      </view>
    </view>
    <u-gap height="120" bg-color="#F6F6F6"></u-gap>
    <view class="newFinancialSolution" @click="$u.throttle(baocunClick, 1000)">
      <view class="newbutton">
        保存
      </view>
    </view>
    <!-- 方案类型-->
    <u-popup v-model="schemeTypexz" mode="bottom" length="26%" border-radius="30">
      <view class="hgzbox">
        <view class="hgztitle">
          方案类型
        </view>
        <view class="hgxz" @click="sTypeClick(0)">
          低首付
        </view>
        <view class="hgxz" @click="sTypeClick(1)">
          以租代售
        </view>
      </view>
    </u-popup>
    <!-- 数字键盘 -->
    <u-keyboard ref="uKeyboard" mode="number" v-model="newsshow" :dot-enabled="false" @change="valChange" @backspace="backspace"></u-keyboard>
  </view>
</template>

<script src="./newFinancialSolution.js"></script>
<style lang="scss" scoped>
  @import './newFinancialSolution.scss';
</style>
